<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "eb75bfa2b981bb5caf8d41610f49a897",
			};
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript">
			AMapLoader.load({
				key: "4e3a472653049a47d930cfb41ca6ff29", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			})
				.then((AMap) => {
					const map = new AMap.Map("container", {
						zoom: 11, //级别
						center: [104.065751, 30.657453], //中心点坐标
						viewMode: "3D", //使用3D视图
					});
				})
				.catch((e) => {
					console.error(e); //加载错误提示
				});
		</script>
	</head>
	<body class="run">
		<main>
			<!-- 顶部导航 -->
			<nav class="navbar"></nav>
			<!-- 目前累计跑步距离 -->
			<div class="hint-text">
				<p class="word">目前累计跑步距离:</p>
				<p class="num"><span id="totalNum">0</span>公里</p>
			</div>
			<!-- 地图区 -->
			<div class="map">
				<!-- 地图 -->
				<div id="container"></div>
				<!-- 小标题 -->
				<section class="checkbox">
					<button id="checkbox1" type="button" class="active">户外跑</button>
					<button id="checkbox1" type="button">燃脂跑</button>
					<button id="checkbox1" type="button">跑步机</button>
				</section>
				<!-- 开始按钮 -->
				<section class="startbtn">GO</section>
				<!-- 设置按钮 -->
				<section class="set">
					<a href="#" class="setbtn"><i class="iconfont icon-set"></i></a>
					<a href="#" class="settag">设置目标&gt;</a>
					<a href="#" class="setmusic"><i class="iconfont icon-music"></i></a>
				</section>
			</div>
			<!-- 跑步路线 -->
			<div class="runroute">
				<p class="word">
					<strong>跑步路线</strong>
					使用跑步路线，邂逅附近的同行者
				</p>
				<a id="#">&gt;</a>
			</div>
		</main>
		<!-- 底部导航 -->
		<nav class="tabbar"></nav>
		<!-- //蒙层 -->
		<div id="mask">
			<div id="go">3</div>
		</div>
	</body>
</html>
